<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

// 定义要发送的事件
const emits = defineEmits(['switch-home']);

const router = useRouter();
const currentHome = ref('blog'); // 当前选中的首页类型

const menuItems = [
  { 
    name: '首页', 
    path: '/',
    isHome: true, // 标记是首页
    children: [
      { name: '默认首页', type: 'default' },
      { name: '搜索首页', type: 'search' },
      { name: '博客首页', type: 'blog' },
      { name: '专栏首页', type: 'column' }
    ]
  },
  { 
    name: '文章', 
    path: '/articles',
    children: [
      { name: '全部文章', path: '/articles' },
      { name: '技术', path: '/articles/tech' },
      { name: '生活', path: '/articles/life' }
    ]
  },
  { 
    name: '随笔', 
    path: '/essays',
    children: [
      { name: '全部随笔', path: '/essays' },
      { name: '日常', path: '/essays/daily' },
      { name: '感悟', path: '/essays/thoughts' }
    ]
  },
  { name: '记录', path: '/records' },
  { name: '相册', path: '/photos' },
  { name: '留言板', path: '/messages' },
  { name: '友链', path: '/friends' },
  { name: '关于', path: '/about' },
  { name: '登录', path: '/login' }
];

const switchHome = (type) => {
  currentHome.value = type;
  // 使用 emits 发送事件
  emits('switch-home', type);
  // 如果不在首页，跳转到首页
  if (router.currentRoute.value.path !== '/') {
    router.push('/');
  }
};
</script>

<template>
  <header class="header">
    <nav class="nav-menu">
      <div class="menu-items">
        <div v-for="item in menuItems" 
          :key="item.path"
          class="menu-item-wrapper"
        >
          <router-link 
            v-if="!item.children"
            :to="item.path"
            class="menu-item"
          >
            {{ item.name }}
          </router-link>
          
          <div v-else class="menu-item-dropdown">
            <span class="menu-item">{{ item.name }}</span>
            <div class="dropdown-content">
              <!-- 首页的下拉菜单 -->
              <template v-if="item.isHome">
                <div v-for="child in item.children"
                  :key="child.type"
                  class="dropdown-item"
                  :class="{ active: currentHome === child.type }"
                  @click="switchHome(child.type)"
                >
                  {{ child.name }}
                </div>
              </template>
              <!-- 其他页面的下拉菜单 -->
              <template v-else>
                <router-link
                  v-for="child in item.children"
                  :key="child.path"
                  :to="child.path"
                  class="dropdown-item"
                  :class="{ active: $route.path === child.path }"
                >
                  {{ child.name }}
                </router-link>
              </template>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<style lang="less" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  .nav-menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    .menu-items {
      max-width: 1200px;
      margin: 0 auto;
      padding: 1rem;
      display: flex;
      justify-content: center;
      gap: 2rem;
    }

    .menu-item {
      color: #666;
      text-decoration: none;
      font-size: 1rem;
      padding: 0.5rem 1rem;
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        color: #42b983;
        background: rgba(66,185,131,0.1);
      }

      &.router-link-active {
        color: #42b983;
        background: rgba(66,185,131,0.1);
      }
    }
  }

  .menu-item-wrapper {
    position: relative;

    &:hover {
      .dropdown-content {
        display: block;
      }
    }
  }

  .menu-item-dropdown {
    cursor: pointer;

    .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      min-width: 160px;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      padding: 0.5rem 0;
      z-index: 1000;

      .dropdown-item {
        display: block; // 添加这行以确保 router-link 也是块级元素
        padding: 0.5rem 1rem;
        color: #666;
        text-decoration: none;
        transition: all 0.3s;
        
        &:hover {
          color: #42b983;
          background: rgba(66,185,131,0.1);
        }

        &.active {
          color: #42b983;
          background: rgba(66,185,131,0.1);
        }
      }
    }
  }
}
</style> 